<template>
  <el-dialog :title="title"  class="setting" :visible.sync="isShowModel" :before-close="handleClose" @close="$emit('update:isShowDetail', false)" :close-on-click-modal="false">
    <div>
      <!-- 搜索 -->
      <div class="searchArea">
        <el-input v-model="settingInfo.userName" placeholder="请输入内容" @keyup.enter.native="onSearch" ref="input-userName">
        </el-input>
        <el-button type="primary" icon="el-icon-search" size="mini" style="margin-left: 10px" @click="onSearch"></el-button>
      </div>
      <!-- 列表 -->
      <div>
        <div class="setting-list">
          <el-row :gutter="10">
            <el-col :span="11" v-for="(item, index) in settingList" :key="index">
              <div>
                <el-radio v-model="settingInfo.userId" :label="item.id">{{item.userName}}</el-radio>
              </div>
            </el-col>
          </el-row>
        </div>
        <jxf-pagination class="mt20" :pageTotal="pageTotal" :currentPage.sync='currentPage' :pageSize.sync="pageSize"
                        @currentPageChange="currentPageChange" @pageSizeChange="pageSizeChange"></jxf-pagination>
      </div>
    </div>
    <div slot="footer" class="dialog-footer">
      <p>您当前选择的是：{{settingInfo.userId ? getCompany(getCompany) : ""}}</p>
      <div>
        <el-button @click="closeModel">取 消</el-button>
        <el-button type="primary" @click="chooseCompany">确 定</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script>
    export default {
        name: "Setting",
        props: {
          isShowDetail: {
            type: Boolean,
            default: false
          },
          title: {
            type: String,
            default: "设置"
          },
          dataInfo: {
            type: Object,
            default: () => {}
          },
          userType: {
            type: Number,
            default: 2
          },
          total: {
            type: Number,
            default: 0
          }
        },
        data() {
          return {
            settingInfo: {
              userName: "",
              userId: ""
            },
            isShowModel: this.isShowDetail,
            name: "",
            settingList: this.dataInfo ? this.dataInfo.dataList : [],
            pageTotal: this.total,
            currentPage: 1,
            pageSize: 10
          }
        },
        methods: {
          // 得到公司名字
          getCompany(val) {
            for(let index = 0; index <= this.settingList.length; index ++) {
              if(this.settingList[index].id == this.settingInfo.userId) {
                this.name = this.settingList[index].userName
                return this.settingList[index].userName;
              }
            }
          },
          chooseCompany() {
            if(this.userType == 2) {
              this.$emit('getValue', {
                userType: 2,
                id: this.settingInfo.userId,
                userName: this.name
              })
            }
            if(this.userType == 6) {
              this.$emit('getValue', {
                userType: 6,
                id: this.settingInfo.userId,
                userName: this.name
              })
            }
            if(this.userType == 7) {
              this.$emit('getValue', {
                userType: 7,
                id: this.settingInfo.userId,
                userName: this.name
              })
            }
            this.name = ""
            this.closeModel()
          },
          handleClose(done) {
            this.settingInfo.userName = "";
            this.settingInfo.userId = ""
            done()
          },
          // 关闭弹框
          closeModel() {
            this.settingInfo.userName = "";
            this.settingInfo.userId = ""
            this.isShowModel = false
          },
          onSearch() {
            this.currentPage = 1;
            this.getData()
          },
          getData() {
            let data = {
              userType: this.userType,
              userName: this.settingInfo.userName,
              pageNum: this.currentPage,
              pageSize: this.pageSize
            }
            ajax.post(apis.user.getBranchList, data).then(result => {
              if(result.code == "10000000") {
                this.settingList = result.data.dataList;
                this.pageTotal = result.data.total;
              } else {
                this.$message.error(result.message)
              }
            })
          },
          // 切换页面
          currentPageChange(pageNo) {
            this.currentPage = pageNo;
            this.getData()
          },
          // 切换页面条数
          pageSizeChange(pageNo) {
            this.pageSize = pageNo
            this.getData()
          },
        },
        watch: {
          isShowDetail(val) {
            this.isShowModel = val;
          },
          dataInfo() {
            this.settingList = this.dataInfo.dataList
          },
          total() {
            this.pageTotal = this.total
          }
        }
    }
</script>

<style lang="scss">
.setting {
  .el-dialog {
    width: 800px;
    .searchArea {
      display: flex;
      justify-content: flex-end;
      .el-input {
        width: 200px;
      }
    }
    .setting-list {
      padding: 20px 0;
      .el-col {
        padding: 10px 0;
        font-size: 20px!important;
      }
    }
    .dialog-footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      p {
        font-size: 14px;
      }
    }
  }

}
</style>
